<template>
	<view class="forms">
		<view class="uni-form-item uni-column">
			<view class="title">收货人</view>
			<input class="uni-input" v-model="addressDetail.name" placeholder="请填写收货人姓名"
				placeholder-style="color:#ABACAD;font-size:28rpx" />
			<image class="ipt_icon user_icon" :src="IMGLink+'/my/user_icon.png'" mode="widthFix"></image>
		</view>
		<view class="uni-form-item uni-column">
			<view class="title">联系电话</view>
			<input class="uni-input" type="number" v-model="addressDetail.tel" placeholder="请填写收货人手机号"
				placeholder-style="color:#ABACAD;font-size:28rpx" />
			<image class="ipt_icon phone_icon" :src="IMGLink+'/my/phone_icon.png'" mode="widthFix"></image>
		</view>
		<view class="uni-form-item uni-column">
			<view class="title">所在区域</view>
			<!-- #ifdef MP-WEIXIN -->
			<picker class="pickerList" mode="region" @change="bindRegionChange" :value="region"
				:custom-item="customItem">
				<text v-if="region.length ==0">请选择区域</text>
				<text v-else class="area">{{region}}</text>
				<image class="ipt_icon site_icon" :src="IMGLink+'/my/site_icon.png'" mode="widthFix"></image>
			</picker>
			<!-- #endif -->

			<!-- #ifdef H5 -->
			<picker class="pickerList" mode="multiSelector" :range="newProvinceDataList" range-key="label"
				@change="pickerChange" @columnchange="pickerColumnchange" :value="multiIndex">
				<text v-if="region.length ==0">请选择区域</text>
				<text v-else class="area">{{region}}</text>
				<image class="ipt_icon site_icon" :src="IMGLink+'/my/site_icon.png'" mode="widthFix"></image>
			</picker>
			<!-- #endif -->
		</view>
		<view class="uni-form-item uni-column address_detail">
			<view class="title">详细地址</view>
			<textarea v-model="addressDetail.addr" auto-height placeholder="街道、门牌号等"
				placeholder-style="color:#ABACAD;font-size:28rpx" />
		</view>

		<button type="default" v-if="options.type == 'edit'" class="edit_btn" @click="isEdit">
			修改地址
		</button>
		<button type="default" v-else class="add_btn" @click="doAdd">
			添加
		</button>
	</view>
</template>

<script>
	import {
		addresslist
	} from '@/api/my/address.js';
	import {
		store,
		mutations
	} from "@/store/index.js";
	import provinceData from '@/static/js/provinceData.js';
	export default {
		data() {
			return {
				region: ['', '', ''],
				customItem: '',
				IMGLink: this.IMGLink,

				options: {},
				addressDetail: {
					name: "",
					tel: "",
					province_code: "",
					province_name: "",
					city_code: "",
					city_name: "",
					addr: "",
					district_code: "",
					district_name: "",
				},
				areainfo: {},

				newProvinceDataList: [
					[],
					[],
					[]
				],
				oldpProvinceDataList: provinceData,
				multiIndex: [0, 0, 0],
			}
		},
		onLoad(options) {
			this.options = options;
			if (options.type == 'edit') {
				wx.setNavigationBarTitle({
					title: '修改地址'
				});
				let addressinfo = this.$store.state.addressdetail;
				this.addressDetail = addressinfo;
				this.region = [addressinfo.province_name, addressinfo.city_name, addressinfo.district_name].join(',');
			} else {
				this.region = [];
			}
			//#ifdef H5
			for (let i = 0; i < this.oldpProvinceDataList.length; i++) {
				this.newProvinceDataList[0].push(this.oldpProvinceDataList[i]);
			}
			for (let i = 0; i < this.oldpProvinceDataList[0].children.length; i++) {
				this.newProvinceDataList[1].push(this.oldpProvinceDataList[0].children[i]);
			}
			for (let i = 0; i < this.oldpProvinceDataList[0].children[0].children.length; i++) {
				this.newProvinceDataList[2].push(this.oldpProvinceDataList[0].children[0].children[i]);
			}
			//#endif

		},
		methods: {
			bindRegionChange: function(e) {
				this.areainfo = e.detail;

				this.addressDetail.province_code = e.detail.code[0];
				this.addressDetail.city_code = e.detail.code[1];
				this.addressDetail.district_code = e.detail.code[2];

				this.addressDetail.province_name = e.detail.value[0];
				this.addressDetail.city_name = e.detail.value[1];
				this.addressDetail.district_name = e.detail.value[2];

				this.region = e.detail.value.join(',');
			},

			doAdd() {
				this.isVerify();
			},
			showToast(text) {
				uni.showToast({
					title: text,
					icon: 'none',
				});
			},
			isVerify() {
				let reg = /^1(3[0-9]|4[5,7]|5[0,1,2,3,5,6,7,8,9]|6[2,5,6,7]|7[0,1,7,8,6]|8[0-9]|9[1,8,9])\d{8}$/;

				if (!this.addressDetail.name) {
					this.showToast('请输入收货人姓名');
					return;
				} else if (!this.addressDetail.tel) {
					this.showToast('请输入收货人电话');
					return;
				} else if (!reg.test(this.addressDetail.tel) || !this.addressDetail.tel.length == 11) {
					this.showToast('手机号格式错误');
					return;
				} else if (this.region.length == 0) {
					this.showToast('请选择所在区域');
					return;
				} else if (!this.addressDetail.addr) {
					this.showToast('请输入详细地址');
					return;
				} else {
					if (this.options.type == 'edit') {
						this.isEdit();
					} else {
						this.doOperate();
					}
				}
			},
			doOperate() {
				let text = this.options.type == 'edit' ? '修改' : '添加';
				uni.showLoading({
					title: `${text}中`
				});
				let {
					name,
					tel,
					province_code,
					province_name,
					city_code,
					city_name,
					addr,
					district_code,
					district_name,
					id
				} = this.addressDetail;
				let params = {
					name,
					tel,
					province_code,
					province_name,
					city_code,
					city_name,
					addr,
					district_code,
					district_name,
					id
				};
				if (this.options.type == 'add') {
					delete params['id'];
				}
				addresslist('setUserAddress', params).then(res => {
					uni.hideLoading();
					if (res.code == 200) {
						let pages = getCurrentPages() //页面栈
						let prePage = pages[pages.length - 2] //上一页
						prePage.$vm.reFresh = Math.random() //触发上一页监听器
						this.$Toast.success(`${text}成功`)
						setTimeout(() => {
							uni.navigateBack() //返回上一页
						}, 500)
					}
				}).catch(error => {
					uni.hideLoading();
				})
			},
			isEdit() {
				uni.showModal({
					title: '提示',
					content: '确定要修改吗？',
					success: (res) => {
						if (res.confirm) {
							this.doOperate();
						} else if (res.cancel) {
							console.log('用户点击取消')
						}
					}
				})
			},

			// 省市区确认事件
			pickerChange(e) {
				this.multiIndex = e.detail.value;
				this.addressDetail.province_code = this.newProvinceDataList[0][this.multiIndex[0]].value;
				this.addressDetail.city_code = this.newProvinceDataList[1][this.multiIndex[1]].value;
				this.addressDetail.district_code =this.newProvinceDataList[2][this.multiIndex[2]].value;
				
				this.addressDetail.province_name = this.newProvinceDataList[0][this.multiIndex[0]].label;
				this.addressDetail.city_name = this.newProvinceDataList[1][this.multiIndex[1]].label;
				this.addressDetail.district_name = this.newProvinceDataList[2][this.multiIndex[2]].label;
				this.region =
					`${this.newProvinceDataList[0][this.multiIndex[0]].label},${this.newProvinceDataList[1][this.multiIndex[1]].label},${this.newProvinceDataList[2][this.multiIndex[2]].label}`;
			},
			pickerColumnchange(e) {
				// 第一列滑动
				if (e.detail.column === 0) {
					this.multiIndex[0] = e.detail.value
					this.newProvinceDataList[1] = this.oldpProvinceDataList[this.multiIndex[0]].children.map((item,
						index) => {
						return item
					})
					if (this.oldpProvinceDataList[this.multiIndex[0]].children.length === 1) {
						this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].children[0].children
							.map((item,
								index) => {
								return item
							})
					} else {
						this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].children[this
							.multiIndex[
								1]].children.map((item, index) => {
							return item
						})
					}
					// 第一列滑动  第二列 和第三列 都变为第一个
					this.multiIndex.splice(1, 1, 0)
					this.multiIndex.splice(2, 1, 0)
				}
				// 第二列滑动
				if (e.detail.column === 1) {
					this.multiIndex[1] = e.detail.value
					this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].children[this.multiIndex[
							1]]
						.children.map((item, index) => {
							return item
						})
					// 第二列 滑动 第三列 变成第一个
					this.multiIndex.splice(2, 1, 0)
				}
				// 第三列滑动
				if (e.detail.column === 2) {
					this.multiIndex[2] = e.detail.value
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "../my.scss";

	.forms {
		padding: 0 0 60rpx 20rpx;
		color: #383838;
		font-size: 28rpx;

		.uni-form-item:first-child {
			border-top: 2rpx solid #eff2f5;
		}

		.uni-form-item {
			position: relative;
			line-height: 100rpx;
			@include flexLayout(center, flex-start);
			border-bottom: 2rpx solid #eff2f5;
			padding-top: 10rpx;

			uni-picker,
			.uni-picker {
				width: 78%;
				color: #ABACAD;
			}

			.pickerList {
				width: 80%;
			}

			.area {
				color: #383838;
			}

			.title {
				width: 150rpx;
			}

			.ipt_icon {
				width: 28rpx;
				position: absolute;
				right: 24rpx;
			}

			.phone_icon {
				right: 29rpx;
			}

			.user_icon {
				width: 34rpx;
			}

			.site_icon {
				top: 40rpx;
				right: 29rpx;
			}
		}

		.active_btn {
			width: 80%;
			height: 84rpx;
			line-height: 84rpx;
			background: linear-gradient(360deg, #EE4629 0%, #EE653A 100%);
			box-shadow: 0px 20rpx 36rpx 0px rgba(238, 73, 43, 0.25);
			border-radius: 42rpx;
			margin: 120rpx 10%;
			color: #FFFFFF;
			font-size: 36rpx;
			font-weight: 500;
		}

		.edit_btn,
		.add_btn {
			position: fixed;
			bottom: 100rpx;
			left: 0;
			width: 90%;
			height: 82rpx;
			line-height: 82rpx;
			background: #F54642;
			border-radius: 48rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			margin: 0 5%;
			padding: 0;
		}

		.address_detail {
			min-height: 90rpx;

			.uni-textarea,
			uni-textarea,
			textarea {
				min-height: 100rpx;
				padding: 10rpx 20rpx 20rpx 0;
			}
		}
	}
</style>
